<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>

<body>
    <input type="file" id="fileUp" accept="image/*">
    <span id="progress">0%</span>
    <hr>
    <img src="" id="serverImg">
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script>
        let _data = new Proxy({ total: 0 }, {
            set(tgt, key, value) {
                tgt[key] = value;
                if (_data.total >= 100) {
                    progress.innerHTML = "上传成功";
                    return;
                }
                progress.innerHTML = `${_data.total}%`;
            }
        })
        fileUp.onchange = async function (e) {
            let file = fileUp.files[0];
            // 数据
            let formData = new FormData();
            formData.append('chunk', file);
            formData.append('filename', $formatFileName(file.name).filename);
            // 提交
            // _data.total = 0;
            let result = await $ajax({
                url: "http://127.0.0.1:4000/single",
                data: formData,
                progress: ev => {
                    _data.total = Math.ceil(ev.loaded / ev.total * 100);
                }
            })
            // serverImg.src = ;
            console.log(result.imgSrc)
            serverImg.setAttribute('src', result.imgSrc)
        }
    </script>
</body>

</html>